<template>
  <div id="container">
    <!-- xs: 特小，手机端
            sm: 小于浏览器一半宽度
            md: 浏览器一半宽度左右
            lg：接近浏览器全屏宽度
            xl：浏览器全屏宽度 
    -->
    <!-- '常用'模块 -->
    <div class="title">常用</div>
    <el-row :gutter="20">
      <el-col
        :xs="10"
        :sm="6"
        :md="6"
        :lg="6"
        :xl="6"
        v-for="(item, index) in commonlyList"
        :key="index.id"
        ><div class="C_box">
          <a :href="item.net" class="card_link">
            <div class="describeText">{{ item.name }}</div>
            <div class="card-desc">{{ item.net }}</div>
          </a>
        </div></el-col
      >
    </el-row>

    <!-- '新闻'模块 -->
    <div class="title">新闻</div>
    <el-row :gutter="20">
      <el-col
        :xs="10"
        :sm="6"
        :md="6"
        :lg="6"
        :xl="6"
        v-for="(item, index) in news"
        :key="index.id"
        ><div class="C_box">
          <a :href="item.net" class="card_link">
            <div class="describeText">{{ item.name }}</div>
            <div class="card-desc">{{ item.net }}</div>
          </a>
        </div></el-col
      >
    </el-row>

    <!-- '娱乐'模块 -->
    <div class="title">娱乐</div>
    <el-row :gutter="20">
      <el-col
        :xs="10"
        :sm="6"
        :md="6"
        :lg="6"
        :xl="6"
        v-for="(item, index) in entertainment"
        :key="index.id"
        ><div class="C_box">
          <a :href="item.net" class="card_link">
            <div class="describeText">{{ item.name }}</div>
            <div class="card-desc">{{ item.net }}</div>
          </a>
        </div></el-col
      >
    </el-row>
  </div>
</template>

<script>
export default {
  name: "HNavigation",

  data() {
    return {
      //'常用'数据列表
      commonlyList: [
        { id: "1", name: "百度", net: "https://www.baidu.com/" },
        { id: "2", name: "百度翻译", net: "https://fanyi.baidu.com/" },
        { id: "3", name: "人民网", net: "http://opinion.people.com.cn/" },
        { id: "4", name: "百度", net: "https://www.baidu.com/" },
      ],
      //'新闻'列表
      news: [
        { id: "1", name: "百度新闻", net: "https://news.baidu.com/" },
        { id: "2", name: "新浪新闻", net: "https://news.sina.com.cn/" },
        { id: "3", name: "今日头条", net: "https://www.toutiao.com/" },
        { id: "4", name: "腾讯新闻", net: "https://news.qq.com/" },
      ],
      //'娱乐'列表
      entertainment: [
        { id: "1", name: "哔哩哔哩", net: "https://www.bilibili.com/" },
        { id: "2", name: "AcFun", net: "https://www.acfun.cn/" },
        { id: "3", name: "小象单机游戏", net: "https://www.dxdjyx.com/" },
        { id: "4", name: "网易娱乐", net: "https://ent.163.com/" },
      ],
    };
  },

  mounted() {},

  methods: {},
};
</script>

<style lang="less" scoped>
#container {
  margin: 0 75px;
//   border: 1px solid #fff;
}
.title {
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  text-indent: 0.5em;
  padding: 10px 0;
}
.C_box:hover {
  transform: translate(0, -3px);
  box-shadow: 0 8px 8px rgba(10, 16, 20, 0.24), 0 0 8px rgba(10, 16, 20, 0.12);
  .describeText {
    color: black;
  }
  .card-desc {
    color: #fff;
  }
}
.C_box {
  margin-bottom: 30px;
  transition: all 0.3s;
  .describeText {
    color: #145ccd;
    font-size: 14px;
    font-weight: 700;
    transition: all 0.3s;
  }
  .card-desc {
    color: rgb(112, 109, 109);
    font-size: 13px;
    padding: 10px 0;
    overflow: hidden;
    white-space: normal;
    transition: all 0.3s;
  }
}

.card_link {
  display: block;
  padding: 15px 10px;
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 10px;
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(4px);
}
</style>